<template>
  <div class="classify-container">
    <!-- 头部 -->
    <van-nav-bar title="" left-text="主页" left-arrow @click-left="onClickLeft" />
    <div class="content">
        <!-- 侧面导航栏 -->
      <van-sidebar v-model="activeKey" @change="onChange">
        <van-sidebar-item :title="item" v-for="item in classList" :key="item.index" />
      </van-sidebar>
      <!-- 右边宫格 -->
      <van-grid :gutter="10" column-num="3" class="grid">
        <van-grid-item v-for="item in productList" :key="item.id" text="" @click="toRouter(item.id)">
          <van-image :src="item.picture" />
        </van-grid-item>
      </van-grid>
    </div>
  </div>

</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      activeKey: 0,
      classList: [
        '推荐分类',
        '海鲜',
        '快餐',
        '川湘菜',
        '西餐',
        '日韩料理',
        '甜点',
        '排骨',
        '火锅',
        '大家电',
      ],
      productList:[]
    }
  },
  created(){
    this.onChange(1)
  },
  methods: {
    // 返回
    onClickLeft() {
      this.$router.replace('/main')
    },
    // 选择侧面标签
    onChange(index) {
      index == 0?index=1:
      axios({
        url:'/api/shop/list/category',
        method:'get',
        params:{
            categoryId:index,
            pageSize:10,
            pageNo:1
        }
      }).then(res=>{
        console.log(res.data);
        if(res.data.resultCode == 1){
            this.productList = res.data.resultInfo.list
        }
      })
    },
    //点击商品跳转
    toRouter(id){
      console.log(id);
      this.$router.push({path:'/detail',query:{id}})
    },
 
  }
}
</script>

<style lang="css" scoped>
.classify-container {
  width: 100%;
  /* background-color: aqua; */
}
.content{
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.grid{
  margin-top: 10px;
  max-width: 75%;
}
</style>